// components/elements/HeroSection
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Typography } from '@mui/material';
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
import { NeumorphicPaper, NeumorphicButton } from 'components/atoms/NeumorphicElements';

// eslint-disable-next-line no-unused-vars
export const HeroSection = ({ darkMode, icon, text, iconSx, largeHeaderSx, smallHeaderSx, buttonSx, listItemSx }) => {
  const navigate = useNavigate();
  const [isButtonPressed, setIsButtonPressed] = useState(false);

  const navigatePage = (url) => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  const navigateOpen = (path) => {
    if (path.startsWith('http')) {
      navigatePage(path);
    } else {
      navigate(path);
    }
  };
  
  // Handle button press state
  const handlePointerDown = () => {
    setIsButtonPressed(true);
  };
  
  const handlePointerUp = () => {
    setIsButtonPressed(false);
  };
  
  return (
    <NeumorphicPaper 
      darkMode={darkMode}
      sx={{ 
        width: '100%',
        textAlign: 'center',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        padding: '40px 20px'
      }}
    >
      <RocketLaunchIcon 
        sx={iconSx} 
      />
      
      <Typography 
        fontWeight="800"
        sx={largeHeaderSx}
      >
        We Build Go/Node + React powered SAAS Templates
      </Typography>
      
      <NeumorphicButton
        darkMode={darkMode}
        className={isButtonPressed ? 'pressed' : ''}
        onClick={() => navigateOpen('https://github.com/startersaas')}
        onPointerDown={handlePointerDown}
        onPointerUp={handlePointerUp}
        onPointerLeave={handlePointerUp}
        sx={buttonSx}
      >
        Get the Starters
      </NeumorphicButton>
    </NeumorphicPaper>
  );
};